<template>
  <!-- 新增弹窗 -->
  <el-dialog
    v-model="unitDialog"
    :title="drawerProps.title"
    width="600"
    :before-close="handleClose"
  >
    <el-scrollbar height="220px" class="medicineContent">
      <el-form
        ref="ruleFormRef"
        :model="drawerProps.row"
        :rules="rules"
        label-width="100px"
        :hide-required-asterisk="drawerProps.isView"
        :disabled="drawerProps.isView"
      >
        <el-form-item label="转换描述" prop="name">
          <el-input
            v-model="drawerProps.row.name"
            placeholder="请输入转换描述..."
          />
        </el-form-item>

        <el-form-item label="操作符" prop="operator">
          <el-select
            v-model="drawerProps.row.operator"
            placeholder="请选择所属系统"
            size="samll"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="计算值" prop="value">
          <el-input-number v-model="drawerProps.row.value" :min="1" :max="10" />
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-input
            v-model="drawerProps.row.unit"
            placeholder="请输入单位..."
          />
        </el-form-item>
      </el-form>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="resetForm(ruleFormRef)"
          v-if="drawerProps.title == '新增'"
        >
          重置
        </el-button>
        <el-button @click="unitDialog = false">取消</el-button>
        <el-button
          v-show="!drawerProps.isView"
          type="primary"
          @click="handleSubmit"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="tsx" name="MedicineDialog">
import { ref, onMounted, reactive } from "vue";
import { ElMessage, FormInstance } from "element-plus";
const unitDialog = ref(false);
// let options = []; //医学所属系统列表
interface DrawerProps {
  title: string;
  isView: boolean;
  row: any;
  api?: (params: any, id?: string) => Promise<any>;
  getTableList?: () => void;
}

// const initRow = {
//   family: "X", //所属常数类别
//   type: "医学", //属性类型
// };

const options = [
  { value: "+", label: "+" },
  { value: "-", label: "-" },
  { value: "*", label: "*" },
  { value: "/", label: "/" },
];

const handleClose = () => {
  unitDialog.value = false;
};

const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {},
});

const rules = reactive<any>({
  name: [
    { required: true, message: "请输入转换描述...", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],

  operator: [{ required: true, message: "请输入操作符...", trigger: "blur" }],
  value: [{ required: true, message: "请输入计算值...", trigger: "blur" }],
  unit: [{ required: true, message: "请输入单位...", trigger: "blur" }],
});

const ruleFormRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 接收父组件传过来的参数
const acceptParams = (params: any) => {
  resetForm(ruleFormRef.value);
  drawerProps.value = params;
  unitDialog.value = true;
};

// 提交数据（新增/编辑）
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return;
    try {
      if (drawerProps.value.title == "新增") {
        await drawerProps.value.api!(drawerProps.value.row);
      } else {
        const id = drawerProps.value.row._id;
        delete drawerProps.value.row._id;
        await drawerProps.value.api!(drawerProps.value.row, id);
      }
      ElMessage.success({ message: `${drawerProps.value.title}单位成功！` });
      drawerProps.value.getTableList!();
      unitDialog.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams,
});
</script>

<style scoped lang="scss">
@import "./unitsDialog.scss";
</style>
